<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
    <div id="root">
         
        <h1>hello {{name}}</h1>
        <!-- <button v-on:click="showinfo">点我出提示</button></br> -->
        <!-- v-on简写为@ -->
        <button @click="showinfo">点我出提示（不传参）</button></br>
        <button @click="showinfo2($event,66)">点我出提示（传参）</button></br>
        <!-- prevent事件修饰符 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showinfo2($event,66)">点我出提示</a></br>
        <!-- stop事件修饰符 阻止事件冒泡 -->
        <div @click="showinfo">
            <button @click.stop="showinfo2($event,66)">点我出提示</button></br>
        </div>
        <!-- once事件修饰符 事件只触发一次 -->
        <button @click.once="showinfo2($event,66)">点我出提示</button></br>
        <input type="text" placeholder="按下enter键弹出输入" @keyup.huiche="showinfo3"><br/>
        <!-- 属性计算computed -->
        姓：<input type="text" v-model="firstName"><br/>
        名：<input type="text" v-model="lastName"><br/>
        全称：<span>{{fullName}}</span>
    </div>
    
    <script type="text/javascript">
        Vue.config.keyCodes.huiche = 13
        new Vue({
            el:"#root",
            data:{
                name:"world",
                firstName:"张",
                lastName:"三"
            },
            methods:{
                showinfo(){
                    alert("同学你好！")
                },
                showinfo2(event,number){
                    alert("同学你好"+number)
                },
                showinfo3(e){
                    alert(e.target.value)
                }
            },
            computed:{
                // 完整写法
                // fullName:{
                //     get(){
                //         return this.firstName+"-"+this.lastName
                //     },
                //     set(){

                //     }
                // }

                // 简写（默认只有getter）
                fullName(){
                    return this.firstName+"-"+this.lastName
                }
            }
        });
    </script>
</body>
</html>